
<template>
  <div class="after-box" :class="{'padding':state==20 }">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="大熊贷款"
      />
    </div>
    <van-pull-refresh style="min-height:100%" v-model="isLoading" @refresh="onRefresh" >
    <van-list
      v-model="dataLoading"
      :finished="dataFinished"
      finished-text="没有更多了"
      @load="newsOnLoad"
    >
    <div v-if="state==20" style="overflow:hidden">
      <!-- 还款 -->
      <div @click="repayClick">
        <van-row class="repayment pad-l-r-15" >
            <van-row type="flex" justify="space-between" >
              <van-col class="repayment-top text-left" span="12">{{periodText}}</van-col>
              <van-col class="repayment-top text-right" span="12">{{borrowAfterState.bankrollName}}提供服务</van-col>
            </van-row>
            <van-row type="flex" justify="space-between">
              <van-col class="moneny-num text-left" span="9">{{(AtRepayPlans.repayMoney/100).toFixed(2)}}</van-col>
              <van-col class="moneny-btn text-right" span="9" v-if="btnState"><div>立即还款</div></van-col>
              <van-col class="explain text-right" span="9" v-if="!btnState">{{btnStateText}}</van-col>
            </van-row>
            <van-col class="repayment-time text-left" span="24">{{repaymentTime}}</van-col>
        </van-row>
      </div>
      <!-- 贷款超链接 -->
      <van-row class="good-app" v-if="loanAppList.length>0">
        <van-row>
          <van-col class="head-tit text-left" span="24"><i></i>优质贷款推荐</van-col>
        </van-row>
        <van-row class="app-list" type="flex" justify="space-around">
            <div class="item" :data-channelId="item.channelId||'-1'" v-for="(item,index) in loanAppList" :key="index" @click="loanAppClick(item.id,item.targetPath)">
              <img class="app-ico" :src="item.icon"  />
              <div class="app-details">
                <span class="name">{{item.name}}</span>
                <span class="keywords">{{item.subtitleTitle}}</span>
                <div class="people-num van-ellipsis">{{item.applyPeopleNum}}人已申请成功</div>
              </div>
            </div>
        </van-row>
      </van-row>
      <!-- 热门资讯 -->
      <van-row class="hot-information" v-if="loanAppList.length==0">
        <van-row>
          <van-col class="head-tit text-left" span="24"><i></i>热门资讯</van-col>
        </van-row>
        <!-- <van-row class="news-list">
          <van-col class="item van-hairline--bottom">
            <div class="left-title text-left">
              <div>干货】又一张 免费的 酒店VIP卡，有免费双早、下午6点退房有免费双早、下午6点退有免费双早、下午6点退有免费双早、下午6点退</div>
              <p>qweqeqwe</p>
            </div>
            <img class="right-img" src="../../../assets/logo.png" alt="">
          </van-col>
        </van-row> -->
        <van-row class="news-list" v-if="loanAppList.length==0">
              <div class="item" v-for="(item, index) in newsList" :key="index" @click="newsDetails(item.targetPath,item.title)">
                <div class="left-title text-left">
                  <div>{{item.title}}</div>
                  <p>{{item.createTime}}</p>
                </div>
                <img class="right-img" :src="item.imgPath" alt="" >
              </div>
          </van-row>
      </van-row>
    </div>
    <div v-if="state==10">
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#43A4FF" >
        <van-swipe-item v-for="(item,index) in adDate" :key="index">
          <!-- :href="item.targetPath" -->
          <a @click="aHref(item.targetPath,item.title)" ><img width="100%" height="100%" :data-id="item.id" :src="item.imgPath" :alt="item.title"></a>
        </van-swipe-item>
      </van-swipe>
      <div class="core-function">
        <div>
          <p class="Certification-status">账单全部结清</p>
          <p class="supplement">现在可以激活新的额度，最高10000元</p>
          <div class="apply-for" @click="applyFor" :disabled="disabled">激活额度</div>
        </div>
      </div>
    </div>
    </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import {Row, Col, List, Popup, Toast,Swipe, SwipeItem,Dialog,NavBar,PullRefresh} from 'vant';

var  timer=0;
export default {

  components:{
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem,
    [Row.name]:Row,
    [Col.name]:Col,
    [List.name]:List,
    [Popup.name]:Popup,
    [Toast.name]:Toast,
    [Dialog.name]:Dialog,
    [NavBar.name]:NavBar,
    [PullRefresh.name]:PullRefresh,
  },
  data() {
    return {
      info:'',
      token:'',
      borrowAfterState:'',
      state:'20',//10已还清/20未还清
      adDate:'',//广告list
      loanAppList:[],//app推荐
      newsList: [],//新闻列表
      dataLoading: false,//新闻loading状态
      dataFinished: false,//新闻底部加载状态
      newsPageNum:1,//新闻当前页数
      isLoading:false,//下拉刷新
      repaymentTime:'还款日：05/01',//还款日
      AtRepayPlans:'',//当期计划或者下期计划
      btnState:true,
      btnStateText:'',
      disabled:true,
      periodText:'本期应还',//本期下期
    };
  },
  destroyed(){
    if(timer) { //如果定时器在运行则关闭
        clearInterval(timer);
    }
  },
  mounted(){
    this.$util.goBack(Dialog,'false');
    _hmt.push(['_trackPageview', '/dhhome']);
    let _this = this;
    this.$util.getUser().then(token=>{
      console.log(token)
       _this.ad();
       _this.token=token;
       _this.loanList();
       _this.newsData(1,5);
      if(token!='-1'){
        _this.myInfo(token);
        _this.borrowAfterSchedule(token);
        _this.$util.appVersion(token,Dialog)
      }
    })
  },
  methods: {
    // a标签跳转
    aHref(url,title){
      this.$util.nativeHeader(url,title)
    },
    // 点击卡片
    repayClick(){
      this.$util.url('/AfterTheLoan','待还账单')
    },
    onRefresh() {
      let token = this.token;
      this.borrowAfterSchedule(token,'onRefresh')
    },
    // header广告
    ad(){
      let _this = this;
      this.$api.get('/ad/v1/list?adGroupCode=homeHead&pageNum=1&pageSize=10',{},s=>{
        this.adDate = s.module.list;
      },f=>{
        Toast(f.errorMessage)
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    },
    // 进度查询
    borrowAfterSchedule(token,onRefresh){
      let _this = this;
      clearInterval(timer)
      this.$api.get('/borrowAfter/v1/borrowAfterSchedule?bankrollCode='+this.$util.bankrollCode,{},s=>{
        console.log(s)
        if(onRefresh){
          Toast('刷新成功');
          _this.isLoading = false;
        }
        let data = s.module;
        _this.borrowAfterState = data//所有状态
        let AtRepayPlans = s.module.repayPlans[0];//当期情况
        _this.AtRepayPlans = AtRepayPlans;
         _this.$util.setSaveVlues('desc','')//清除认证返回状态
         _this.state = s.module.state; //还清未还清状态

         if(s.module.state!=10){
            if(data.payOff){
              _this.periodText = '下期应还';
              _this.btnState = false;
              _this.btnStateText = '本期已结清';
              let AtRepayPlans = s.module.repayPlans[0];//当期情况
              let time = AtRepayPlans.repayDate;
              time = time.split(" ")[0];
              _this.repaymentTime=`还款日:${time}`//还款日
            }else{
              if(data.repayPlans[0].state==20){//未还款
                  _this.periodText = '本期应还';
                  _this.btnState = true;
                  if(data.overdueDays){
                    _this.repaymentTime=`已逾期${s.module.overdueDays}天`//已逾期
                  }else{
                    let time = s.module.repayPlans[0].repayDate;
                    time = time.split(" ")[0];
                    // console.log(time,new Date(time).toDateString(),new Date().toDateString())
                    if(new Date(time).toDateString() == new Date().toDateString()){
                      _this.repaymentTime=`还款日:今日最后一天`//还款日
                    }else{
                      _this.repaymentTime=`还款日:${time}`//还款日
                    }
                  }
              }else if(data.repayPlans[0].state==30||data.repayPlans[0].state==1){
                _this.periodText = '本期应还';
                _this.repaymentTime=`查看详情`//还款日
                _this.btnStateText = `扣款中`
                _this.btnState = false;
                // 审核中定时刷新页面更新状态
                timer=setInterval(() => {
                  _this.borrowAfterSchedule(this.token);
                }, 5000)
              }else if(data.repayPlans[0].state==40){
                _this.periodText = '本期应还';
                _this.btnState = true;
                _this.repaymentTime=`扣款失败`//还款日
              }

            }
         }
      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    },
    //个人信息
    myInfo(token){
      let _this = this;
      this.$api.post('/user/v1/info',{},s=>{
        console.log(s);
        _this.info = s.module;

      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    },
    //新闻 /news/v1/list
    newsData(pages,num){
      let _this = this ;
      let newsGroupCode = 'dxdkapp';
      let newsList = _this.newsList
      this.$api.get('/news/v1/list?newsGroupCode='+newsGroupCode+'&pageNum='+pages+'&pageSize='+num,{},s=>{
        console.log(s);
        let arr = s.module.list;
        if(arr.length != num){
          this.dataFinished = true;
        }else{
          this.newsPageNum++;
        }
        for(var i=0;i<arr.length;i++){
          newsList.push(arr[i]);
        }
        _this.newsList = newsList;
        // 加载状态结束
        _this.dataLoading = false;
        },f=>{
          if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
            _this.$util.url('/HomeBefore','首页')
          }else{
            Toast(f.errorMessage);
          }
      },{
        'Accept': '*/*',
        'Content-Type':'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    },
    newsOnLoad() {
      let page = this.newsPageNum;
      if(page>1){
        this.newsData(page,5);
      }
    },
    newsDetails(url,title){
      // window.location.href = url
      this.$util.nativeHeader(url,'热门资讯')
    },
    loanAppClick(id,url,title){
      let _this =this;
      this.$api.post('/loan/v1/click?loanID='+id+'&deviceNo='+this.deviceNo,{},s=>{
          console.log(s);
        },f=>{
          Toast(f.errorMessage);
      },{
        'Accept': '*/*',
        'Content-Type':'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
      // window.location.href = url
      this.$util.nativeHeader(url,'优质贷款推荐')
    },
    //app列表/loan/v1/list
    loanList(){
      let _this =this;
      let loanGroupCode = 'dhsydc';
      if(this.step == '61'){
        loanGroupCode = 'openActFail';
      }
      this.$api.get('/loan/v1/list?loanGroupCode='+loanGroupCode,{},s=>{
          console.log(s);
          _this.loanAppList = s.module;
        },f=>{
          if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
            _this.$util.url('/HomeBefore','首页')
          }else{
            Toast(f.errorMessage);
          }
      },{
        'Accept': '*/*',
        'Content-Type':'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    },
    // 激活新的额度
    applyFor(){
      this.applyBorrowMoney()
    },
    applyBorrowMoney(){
      let _this = this;
      this.disabled = false;
      this.$api.post('/borrowBefore/v1/applyBorrowMoney?bankrollCode='+this.$util.bankrollCode,{},s=>{
        console.log(s)
        _this.disabled = true;
        switch (s.module.step) {
          case 10:
         //未开始，跳转 基本信息
            this.$util.url('/basicInfo','基本信息')
            // this.$router.push({ path: '/basicInfo'})
            break;
          case 20:
            //基本信息完成，跳转 联系人信息
            this.$util.url('/contactInfo','联系人信息')
            // this.$router.push({ path: '/contactInfo'})
            break;
          case 30:
            //联系人信息完成，跳转 身份证认
            this.$util.url('/identityInfo','身份信息')
            // this.$router.push({ path: '/identityInfo'})
            break;
          case 40:
            //身份证认完成，跳转 人脸认证
            this.$util.url('/FaceRecognition','人脸识别')
            // this.$router.push({ path: '/FaceRecognition'})
            break;
          case 50:
            //人脸认证完成，跳转 运营商认证
            // 三方页面
            // this.applyBorrowMoney()
             _this.$util.h5Authenticate(s.module.orderNo)
            break;
          case 60:
            // 全部完成怎么跳转？
            break;
          case 61:
            _this.$util.h5Authenticate(s.module.orderNo)
            break;
          default:
            break;
        }
        // if(s.module.step ==50){
        //   _this.$util.h5Authenticate(s.module.orderNo)
        // }
      },f=>{
        _this.disabled = true;
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.url('/HomeBefore','首页')
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':this.token
      })
    }
  }

};
</script>
<style>
.van-list{
  padding-bottom:60px;
}
</style>

<style scoped lang="scss">
 /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
  ::-webkit-scrollbar {
      display: block!important;
  }
  .after-box{
    width:100%;
    height:100%;

  }
  .padding{
    padding:0 15px;
  }

  .repayment{
    height:120px;
    margin:15px auto;
    border-radius:15px;
    box-shadow: 0 4px 9px 0 rgba(0,45,160,0.16);
    background:#FF8024;
    .repayment-top{
      margin-top:17.5px;
      height:17px;
      line-height: 17px;
      font-size:12px;;
      color:#fff;
    }
    .moneny-num{
      height:50px;
      margin-top:11px;
      line-height: 50px;
      font-size:36px;
      color:#fff;
    }
    .moneny-btn{
      width:100px;
      height:36px;
      margin-top:15px;
      font-size:14px;
      line-height: 36px;
      text-align: center;
      border-radius: 36px;
      background:#fff;
      color:#FF8024;
    }
    .explain{
      width:100px;
      height:36px;
      margin-top:15px;
      font-size:14px;
      line-height: 36px;
      text-align: center;
      border-radius: 36px;
      color:#fff;
    }
    .repayment-time{
      font-size:12px;
      color:#fff;
    }
  }
  .good-app{
    padding:21px 0;
    .head-tit{
      height:20px;
      font-size:14px;
      line-height: 20px;
      color:#1D0F00;
      i{
        position:relative;
        top:2px;
        display: inline-block;
        width:4px;
        height:13px;
        margin-left:3px;
        margin-right:4px;
        border-radius: 20px;
        background:#FF8024;
      }
    }
    .app-list{
      margin-top:15px;
      padding-top:10px;
      // justify-content: flex-start;
      flex-wrap:wrap;
      // max-height:330px;
      overflow-y:scroll;
      // overflow-x:auto;
      white-space: nowrap;
      /*解决ios上滑动不流畅*/
      -webkit-overflow-scrolling: touch;
      /*利用padding将滚动条挤出：纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
      padding-bottom: 20px;
      .item{
        // width:169px;
        display:flex;
        flex-direction: row;
        width:147px;
        // width:150px;
        height:80px;
        margin-right:5px;
        margin-left:5px;
        margin-bottom:10px;
        // margin:0 5px 10px 5px;
        background: #fff;
        box-shadow: 0 1px 5px 0 rgba(186,186,186,0.50);
        border-radius: 4px;
      }
      .app-ico{
        width:30px;
        height:30px;
        margin:10px 4px 0 10px;
      }
      .app-details{
        display: flex;
        flex-direction: column;
        width:106px;
        text-align: left;
        margin-top:10px;
      }
      .app-details .name{
        font-size:14px;
        line-height: 20px;
        color:#1D0F00;
      }
      .app-details .keywords{
        font-size:12px;
        line-height: 17px;
        color:#1D0F00;
      }
      .app-details .people-num{
        margin-top:8px;
        font-size:12px;
        line-height: 17px;
        color:#797A79;
      }
    }
  }
  .hot-information{
    padding:21px 0 0;
    .head-tit{
      height:20px;
      font-size:14px;
      line-height: 20px;
      color:#1D0F00;
      i{
        position:relative;
        top:2px;
        display: inline-block;
        width:4px;
        height:13px;
        margin-left:3px;
        margin-right:4px;
        border-radius: 20px;
        background:#FF8024;
      }
    }
    .news-list{
      // margin-top:15px;
      padding-top:10px;
      justify-content: flex-start;
      flex-wrap:wrap;
      // height:330px;
      overflow-y:scroll;
      // white-space: nowrap;
      /*解决ios上滑动不流畅*/
      -webkit-overflow-scrolling: touch;
      /*利用padding将滚动条挤出：纵向超出部分将会隐藏，即滚动条部分被挤出可视区域*/
      // padding-bottom: 20px;
      .item{
        overflow: hidden;
        display: flex;
        flex-direction: row;
        width:100%;
        // height:80px;
        border-bottom:1px solid #E6E6E6;
        padding:10px 0;
      }
      .left-title{
        flex:1;
        div{
          overflow:hidden;
          width:237px;
          height:40px;
          font-size:14px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color:#41424E;
        }
        p{
          line-height: 30px;
          font-size:14px;
          color:#797A79;
        }
      }
      .right-img{
        width:90px;
        height:70px;
        background:#ccc;
      }
    }
  }
  .my-swipe{
    overflow: hidden;
    width:349px;
    height:130px;
    border-radius:15px;
    margin:13px auto;
    box-shadow: 0px 0px 10px 2px #E6E6E6;
  }
  .core-function{
    display:flex;
    flex-direction: column;
    align-items:center;
    width:349px;
    height:248px;
    margin:30px auto 10px;
    border-radius:8px;
    box-shadow: 0px 0px 10px 2px #E6E6E6;
  }
  .Certification-status{
    margin-top:70px;
    font-size:22px;
    font-weight: 600;
    color:#1D0F00;
  }
  .supplement{
    margin-top:20px;
    margin-bottom:30px;
    font-size:14px;
    color:#797A79;
  }
  .apply-for{
    width:239px;
    height:46px;
    line-height:46px;
    font-size:16px;
    border-radius:15px;
  background:#FF8024;
    color:#fff;
  }

</style>
